<template>
  <div class="container">
    <div class="app-container">
      <!-- 树形的部门结构 -->
      <!--
        学习一个组件 el-tree
          1. :data="数组" 为树形结构提供数据支持
              数组有严格要求!!!
                每个节点都是一个对象
                  对象必须有一个属性 label 标识当前节点的名字
                  对象可以有/没有 一个属性 children: []

          2. :props="{ label: 'label', children: 'children' }"  需要动态绑定一个对象 修改树形组件读取的字段名

          3. default-expand-all 展开所有节点
      -->
      <el-tree
        :data="treeList"
        :expand-on-click-node="false"
        default-expand-all
        :props="{ label: 'name', children: 'child' }"
      >
        <!-- 默认插槽提供的是每一行的结构 + 作用域插槽(传值 他直接决定了你可以使用插槽上的数据)-->
        <!-- <div style="width: 100%; display: flex; justify-content: space-between;">
          <div class="left">总裁办</div>
          <div class="right" style="display: flex">
            <span>管理员</span>
            <span>下拉菜单</span>
          </div>
        </div> -->

        <!-- obj.data => 指向每一行自己的数据对象 -->
        <template #default="{ data }">
          <!-- el-row  el-col 行列布局 -->
          <el-row
            style="width: 100%; height: 40px"
            type="flex"
            justify="space-between"
            align="middle"
          >
            <el-col :span="20">{{ data.name }}</el-col>
            <el-col :span="4">
              <span class="name">{{ data.managerName }}</span>

              <!-- 这边有个问题 我既要原来的参数(点的是谁)  我又要id -->
              <!-- $event 在自定义事件中指代的是事件本身传来的参数 -->
              <el-dropdown @command="handleCommand($event, data.id)">
                <span class="el-dropdown-link">
                  操作<i class="el-icon-arrow-down el-icon--right" />
                </span>
                <template #dropdown>
                  <el-dropdown-menu>
                    <!-- @click.native="add(data.id)" 是因为el-dropdown-item不支持点击事件, 他有别的方式提供点击事件??? -->
                    <el-dropdown-item command="add">添加子部门</el-dropdown-item>
                    <el-dropdown-item command="edit">编辑部门</el-dropdown-item>
                    <el-dropdown-item command="del">删除部门</el-dropdown-item>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
            </el-col>
          </el-row>
        </template>
      </el-tree>
    </div>

    <!-- 将添加部门的结构单独维护到一个组件中 -->
    <!-- $event 在原生事件中指向事件对象e 在自定义事件中指向传过来的参数 -->
    <!-- <AddDept :show="show" @update:show="show = $event" /> -->
    <AddDept :show.sync="show" :list="list" :operate-id="operateId" />
  </div>
</template>

<script>
import { getDepartmentList, delDept } from '@/api/department'
import AddDept from './components/AddDept.vue'
import { findChildren } from '@/utils'

export default {
  name: 'Department',
  components: { AddDept },
  data() {
    return {
      list: [], // 没有层级关系的数据
      treeList: [], // 有层级关系的数据
      show: false, // 通过父传子传进去 方便父组件控制子组件的显示隐藏
      operateId: -1 // 正在操作(add  edit  del)的部门id
    }
  },
  created() {
    this.getDepartmentList()
  },
  methods: {
    async getDepartmentList() {
      const res = await getDepartmentList()
      // console.log(res)
      this.list = res

      // 临时的找一找子部门: 通过代码的方式找到所有人事部(id=4)的子部门
      // this.findChildren(res, 4)
      // 临时的找一找子部门: 通过代码的方式找到所有运营部(id=7)的子部门
      // this.findChildren(res, 7)
      // 临时的找一找子部门: 通过代码的方式找到所有传智教育(id=1)的子部门
      // this.findChildren(res, 1)

      // console.log(this.findChildren(res, 0)) // 查找我们整个公司旗下(id=0)的子部门(只有一个 传智教育)
      this.treeList = findChildren(res, 0)
    },

    handleCommand(val, id) {
      // val  是本身自带的参数
      // id  表示当前正在操作的部门id
      // console.log(val, id) // add edit del

      if (val === 'add') {
        // console.log('添加啦...')
        this.show = true
        this.operateId = id // 存下来 将来就是添加出来的子部门的pid
      }

      if (val === 'edit') {
        // console.log('编辑啦...')
        this.show = true // 打开addDept
        this.operateId = id // 存下来 将来就是编辑部门的id   获取详情回显!!
        // prop传到子组件内是异步的!!!
        // 想调用子组件addDept中的一个方法 getDeptDetail
        // $children = 包含自己的组件 + 组件库中的组件
        // console.log(this.$children)
        this.$children[1].getDeptDetail(id)
      }

      if (val === 'del') {
        // console.log('删除啦...')
        // 二次确认 => 调用请求函数 => 提示 => 获取最新数据渲染
        this.$confirm('你确认删除么?', '温馨提示', {
          confirmButtonText: '对的',
          cancelButtonText: '点错了',
          type: 'warning'
        }).then(async() => {
          await delDept(id)
          this.$message.success('删除成功')
          this.getDepartmentList()
        }).catch(() => {
          console.log('取消了')
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.app-container {
  padding: 30px 140px;
  font-size: 14px;

  .name {
    margin: 10px;
    width: 50px;
    display: inline-block;
  }
}
</style>
